/* Progess bars */
.#{$progress-bar-class-name} {
    margin-bottom: 1em;
    overflow: hidden;
    background: $progress-bar-bg;
    position: relative;
    @include border-radius($border-radius);  
    @include box-shadow(0, 1px, 3px, 0, rgba( 0, 0, 0, 0.2), inset);

    .caption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.7;
        text-align: center;
        color: $progress-bar-color;
        font-size: $progress-bar-fontSize;
        z-index: $layer-10;
    }
    
    .bar {
        height: 1.3em;
        @include text-shadow (rgba(0, 0, 0, 0.25), 0, 1px, 0);
        @include  box-shadow(0, 1px, 1px, 0, rgba(0, 0, 0, 0.1), inset);

        @include transition-property(width);
        @include transition-duration(0.6s);
        @include transition-timing-function(ease);

        &.grey {            
            @include themeing($grey-20);
        }
        
        &.green {
            @include themeing($green);
        }
        
        &.blue {
            @include themeing($blue);              
        }
        
        &.red {
            @include themeing($red);              
        }
        
        &.orange {
            @include themeing($orange);
        }
        
        &.black {
            @include themeing($black);
        }
    }
}
